<template>
  <div class="search">
    <div class="blackc">
      <div class="search-input">
         <div class="icon-sear"><i class="el-icon-search" @click="jumpPage"></i></div>
        <el-popover
          ref="popover"
          placement="bottom-end"
          width="440"
          trigger="manual"
          v-model="isShowPop"
        >
        <!-- <div class="icon-sear"><i class="el-icon-search" @click="jumpPage"></i></div> -->
          <el-input
            slot="reference"
            style="width: 440px"
            placeholder="请输入歌名、歌词、歌手或专辑"
            v-model="searchValue"
            @blur="doneSearch"
            @focus="ShowSearch"
          >
          </el-input>
          <template>
            <div class="hotkey" v-show="isShowPop">
              <div class="suggestkey">
                <ul
                  class="suggest-content"
                  v-for="(val, key, i) in suggestList"
                  :key="i"
                >
                  <h4>{{ suggestType[key] }}</h4>
                  <li v-for="item in val" :key="item.id" @click="suggestJump(item)">
                    <div v-if="suggestType[key] === '单曲'">
                      {{ item.name }}- {{ item.artists[0].name }}
                    </div>
                    <div v-else-if="suggestType[key] === '专辑'">
                      {{ item.name }}- {{ item.artist.name }}
                    </div>
                    <div v-else>
                      {{ item.name }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="w1200">
      <div class="search-main">
        <div class="search-type"></div>
        <div class="search-list">
          <song-list :songList="list" :pageIndex="couldSearch_params.offset"></song-list>
        </div>
      </div>
    </div>
    <pagination
      :pageSize="paginationobj.pageSize"
      :total="paginationobj.total"
      @changePage="changePage"
    ></pagination>
  </div>
</template>
<script>
import SongList from "@/components/common/Song-list.vue";
import Pagination from "@/components/common/Pagination.vue";
export default {
  components: {
    SongList,
    Pagination,
  },
  data() {
    return {
      keyword: "",
      searchValue: "",
      list: [],
      suggestList: null,
      isShowPop: false,
      paginationobj: {
        pageSize: 30,
        total: 30,
      },
      suggestType: {
        //建议列表类别
        songs: "单曲",
        artists: "歌手",
        albums: "专辑",
        playlists: "歌单",
      },
      //搜索列表type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手,
      //  1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台,
      //  1014: 视频, 1018:综合, 2000:声音
      couldSearch_params: {
        keywords: this.$route.query.keywords,
        offset: 0,
        limit: 30,
        type: 1,
      },
    };
  },
  created() {
    // this.searchValue=this.$route.query.keywords;
    this.search(this.couldSearch_params);
  },
  computed: {},
  watch: {
    searchValue(val) {
      if (val) {
        this.suggestSearch({ keywords: val });
        this.isShowPop = true;
      } else {
        this.isShowPop = false;
      }
    },
    $route(val){
      // console.log(val);
      this.couldSearch_params.keywords = val.query.keywords
      this.search(this.couldSearch_params)
    }
  },
  methods: {
    async suggestSearch(params) {
      //关键词建议搜索
      // this.isShowPop = true;
      const res = await this.$api.getSuggestSearch(params);
      // console.log(res.result);
      let { albums, artists, playlists, songs } = res.result;
      this.suggestList = { songs, artists, albums, playlists };
      // console.log(this.suggestList);
    },
    async search(params) {
      const res = await this.$api.getCloudsearch(params);
      this.dealSearch(res.result);
      // console.log(this.list)
    },
    dealSearch(res) {
      //格式化搜索结果
      this.list = res.songs.map((item) => {
        return {
          id: String(item.id),
          name: item.name,
          mvId: item.mv,
          singer: item.ar,
          album: item.al,
          alia: item.alia,
          vip: item.fee === 1,
          license: item.license,
          duration: this.$util.handleSongTime(item.dt),
          url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
          publishTime: this.$util.getSongDate(item.publishTime),
        };
      });
      this.paginationobj.total = res.songCount; //设置分页器总数
    },
    changePage(num) { //切换分页器
      // console.log(num);
      if (num === 1) {
        this.couldSearch_params.offset = 0;
      } else {
        this.couldSearch_params.offset = (num - 1) * 30;
      }
      this.search(this.couldSearch_params);
    },
     suggestJump(way){
     if(this.$router.query===way.name){
       return
     }
     this.$router.push({name:'Search',query:{keywords:way.name}})
    },
     jumpPage() {
      if (this.searchValue) {
        if (this.$router.query ===this.searchValue) {
        return;
      }
        this.$router.push({
          name: "Search",
          query: { keywords: this.searchValue },
        });
      } else {
        this.isShowPop = false;
      }
    },
    ShowSearch() {
      //获得焦点触发
      if (this.searchValue) {
        this.isShowPop = true;
      } else {
        this.isShowPop = false;
      }
    },
    doneSearch() {
      //失去焦点触发
      setTimeout(() => {
        this.isShowPop = false;
      }, 200);
    },
  },
};
</script>
<style lang="less" scoped>
.search {
  width: 100%;
  .blackc {
    width: 100%;
    height: 250px;
    background-image: url("../../assets/b.jpg");
    text-align: center;
    position: relative;
    .search-input {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .icon-sear{
      width: 30px;
      height: 20px;
      font-size: 16px;
      color: #606266;
      position: absolute;
      top: 10px;
      left: 400px;
      z-index: 100;
      cursor: pointer;
    }
  }
}
</style>
